<template>
  <div class="forgot-page">
    <!-- 高级动态背景系统 -->
    <canvas ref="backgroundCanvas" class="background-canvas"></canvas>
    
    <!-- 液体波纹系统 -->
    <div class="liquid-system">
      <div class="liquid-blob blob-1"></div>
      <div class="liquid-blob blob-2"></div>
      <div class="liquid-blob blob-3"></div>
      <div class="liquid-blob blob-4"></div>
      <div class="liquid-blob blob-5"></div>
    </div>
    
    <!-- 能量环系统 -->
    <div class="energy-ring-system">
      <div class="energy-ring ring-1">
        <div class="ring-pulse"></div>
      </div>
      <div class="energy-ring ring-2">
        <div class="ring-pulse"></div>
      </div>
      <div class="energy-ring ring-3">
        <div class="ring-pulse"></div>
      </div>
    </div>
    
    <!-- 数字雨效果 -->
    <div class="digital-rain">
      <div class="rain-column" v-for="n in 12" :key="'rain-' + n"></div>
    </div>
    
    <!-- 光束扫描 -->
    <div class="laser-scan">
      <div class="scan-line scan-horizontal"></div>
      <div class="scan-line scan-vertical"></div>
      <div class="scan-line scan-diagonal"></div>
    </div>
    
    <!-- 电路网格 -->
    <div class="circuit-grid">
      <div class="grid-line horizontal" v-for="n in 8" :key="'h-' + n"></div>
      <div class="grid-line vertical" v-for="n in 8" :key="'v-' + n"></div>
      <div class="circuit-node" v-for="n in 15" :key="'node-' + n"></div>
    </div>
    
    <!-- 漂浮几何体群 -->
    <div class="geometric-cluster">
      <div class="geo-shape triangle geo-1"></div>
      <div class="geo-shape hexagon geo-2"></div>
      <div class="geo-shape diamond geo-3"></div>
      <div class="geo-shape circle geo-4"></div>
      <div class="geo-shape square geo-5"></div>
      <div class="geo-shape pentagon geo-6"></div>
    </div>
    
    <!-- 重置密码卡片 -->
    <div class="reset-card">
      <div class="card-header">
        <div class="reset-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1L9 7V9C9 10.1 9.9 11 11 11V22H13V11C14.1 11 15 10.1 15 9H21Z" fill="currentColor"/>
          </svg>
        </div>
        <h1 class="card-title">重新开始</h1>
        <p class="card-subtitle">输入用户名和新密码来重置您的账户</p>
      </div>
      
      <form @submit.prevent="handleForgot" class="reset-form">
        <div class="input-group">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="currentColor"/>
            </svg>
            <input
              id="username"
              v-model="username"
              type="text"
              placeholder="请输入用户名"
              class="styled-input"
              required
            />
            <div class="input-underline"></div>
          </div>
        </div>
        
        <div class="input-group">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 10V8C6 5.79 7.79 4 10 4H14C16.21 4 18 5.79 18 8V10H19C20.1 10 21 10.9 21 12V20C21 21.1 20.1 22 19 22H5C3.9 22 3 21.1 3 20V12C3 10.9 3.9 10 5 10H6ZM8 8V10H16V8C16 6.9 15.1 6 14 6H10C8.9 6 8 6.9 8 8Z" fill="currentColor"/>
            </svg>
            <input
              id="newPassword"
              v-model="newPassword"
              type="password"
              placeholder="请输入新密码"
              class="styled-input"
              required
            />
            <div class="input-underline"></div>
          </div>
        </div>
        
        <button type="submit" class="reset-button" :disabled="isLoading">
          <span v-if="isLoading" class="button-content">
            <div class="loading-spinner"></div>
            重置中...
          </span>
          <span v-else class="button-content">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 12L11 14L15 10M21 12C21 16.97 16.97 21 12 21C7.03 21 3 16.97 3 12C3 7.03 7.03 3 12 3C16.97 3 21 7.03 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            重置密码
          </span>
        </button>
      </form>
      
      <div class="card-footer">
        <router-link to="/auth/login" class="back-link">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
          </svg>
          返回登录
        </router-link>
      </div>
    </div>
    
    <!-- 成功模态框 -->
    <div v-if="showModal" class="success-modal" @click.self="closeModal">
      <div class="modal-card">
        <div class="success-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 12L11 14L15 10M21 12C21 16.97 16.97 21 12 21C7.03 21 3 16.97 3 12C3 7.03 7.03 3 12 3C16.97 3 21 7.03 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h3>密码重置成功</h3>
        <p>您的密码已成功重置，请使用新密码登录您的账户。</p>
        <button class="modal-button" @click="goLogin">前往登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { authAPI } from '@/api/auth'

const username = ref('')
const newPassword = ref('')
const isLoading = ref(false)
const showModal = ref(false)
const router = useRouter()
const backgroundCanvas = ref(null)

// 高级粒子和动效系统
let animationId = null
let particles = []
let rainDrops = []
let energyPulses = []

// 初始化高级背景系统
const initAdvancedBackground = () => {
  const canvas = backgroundCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 设置画布大小
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 创建高级粒子系统
  const createAdvancedParticles = () => {
    particles = []
    rainDrops = []
    energyPulses = []
    
    // 主粒子系统
    for (let i = 0; i < 40; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.max(1, Math.random() * 4 + 1), // 确保最小值为1
        speedX: (Math.random() - 0.5) * 1.5,
        speedY: (Math.random() - 0.5) * 1.5,
        opacity: Math.random() * 0.6 + 0.2,
        hue: Math.random() * 40 + 180, // 青蓝色调
        pulse: Math.random() * Math.PI * 2,
        trail: []
      })
    }
    
    // 数字雨粒子
    for (let i = 0; i < 25; i++) {
      rainDrops.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height - canvas.height,
        speed: Math.random() * 3 + 2,
        chars: Math.floor(Math.random() * 10),
        opacity: Math.random() * 0.7 + 0.3,
        life: 0,
        maxLife: Math.random() * 100 + 50
      })
    }
    
    // 能量脉冲
    for (let i = 0; i < 8; i++) {
      energyPulses.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: 0,
        maxRadius: Math.random() * 150 + 100,
        speed: Math.random() * 2 + 1,
        opacity: Math.random() * 0.4 + 0.1,
        hue: Math.random() * 60 + 160
      })
    }
  }
  
  // 高级动画循环
  const advancedAnimate = () => {
    // 创建渐变背景叠加
    const gradient = ctx.createRadialGradient(
      canvas.width/2, canvas.height/2, 0,
      canvas.width/2, canvas.height/2, canvas.width/2
    )
    gradient.addColorStop(0, 'rgba(20, 30, 60, 0.1)')
    gradient.addColorStop(1, 'rgba(10, 15, 30, 0.3)')
    
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // 更新和绘制主粒子
    particles.forEach((particle, index) => {
      // 更新轨迹
      particle.trail.push({x: particle.x, y: particle.y})
      if (particle.trail.length > 8) {
        particle.trail.shift()
      }
      
      // 更新位置
      particle.x += particle.speedX
      particle.y += particle.speedY
      particle.pulse += 0.03
      
      // 边界处理
      if (particle.x < 0) particle.x = canvas.width
      if (particle.x > canvas.width) particle.x = 0
      if (particle.y < 0) particle.y = canvas.height
      if (particle.y > canvas.height) particle.y = 0
      
      // 绘制轨迹
      particle.trail.forEach((point, i) => {
        const trailOpacity = (i / particle.trail.length) * particle.opacity
        const trailRadius = Math.max(0.5, particle.size * (i / particle.trail.length))
        ctx.beginPath()
        ctx.arc(point.x, point.y, trailRadius, 0, Math.PI * 2)
        ctx.fillStyle = `hsla(${particle.hue}, 80%, 70%, ${trailOpacity})`
        ctx.fill()
      })
      
      // 绘制主粒子
      const pulseSize = Math.max(0.5, particle.size + Math.sin(particle.pulse) * 2)
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, pulseSize, 0, Math.PI * 2)
      ctx.fillStyle = `hsla(${particle.hue}, 90%, 80%, ${particle.opacity})`
      ctx.fill()
      
      // 连线效果
      particles.forEach((other, otherIndex) => {
        if (index !== otherIndex) {
          const dx = particle.x - other.x
          const dy = particle.y - other.y
          const distance = Math.sqrt(dx * dx + dy * dy)
          
          if (distance < 120) {
            ctx.beginPath()
            ctx.moveTo(particle.x, particle.y)
            ctx.lineTo(other.x, other.y)
            ctx.strokeStyle = `hsla(${(particle.hue + other.hue) / 2}, 70%, 60%, ${(120 - distance) / 600})`
            ctx.lineWidth = 1
            ctx.stroke()
          }
        }
      })
    })
    
    // 数字雨效果
    rainDrops.forEach((drop, index) => {
      drop.y += drop.speed
      drop.life += 1
      
      if (drop.y > canvas.height + 20 || drop.life > drop.maxLife) {
        drop.y = -20
        drop.x = Math.random() * canvas.width
        drop.life = 0
      }
      
      ctx.font = '14px monospace'
      ctx.fillStyle = `rgba(0, 255, 150, ${drop.opacity * (1 - drop.life / drop.maxLife)})`
      ctx.fillText(drop.chars.toString(), drop.x, drop.y)
    })
    
    // 能量脉冲
    energyPulses.forEach((pulse, index) => {
      pulse.radius += pulse.speed
      
      if (pulse.radius > pulse.maxRadius) {
        pulse.radius = 0
        pulse.x = Math.random() * canvas.width
        pulse.y = Math.random() * canvas.height
      }
      
      const safeRadius = Math.max(0, pulse.radius)
      ctx.beginPath()
      ctx.arc(pulse.x, pulse.y, safeRadius, 0, Math.PI * 2)
      ctx.strokeStyle = `hsla(${pulse.hue}, 100%, 70%, ${pulse.opacity * (1 - pulse.radius / pulse.maxRadius)})`
      ctx.lineWidth = 2
      ctx.stroke()
    })
    
    animationId = requestAnimationFrame(advancedAnimate)
  }
  
  createAdvancedParticles()
  advancedAnimate()
}

const handleForgot = async () => {
  if (!username.value || !newPassword.value) return
  isLoading.value = true
  try {
    const res = await authAPI.forgotPassword({
      username: username.value,
      newPassword: newPassword.value
    })
    if (res.code === 1000) {
      showModal.value = true
    } else {
      alert(res.message || '重置失败')
    }
  } catch (e) {
    alert('重置失败，请稍后重试')
  } finally {
    isLoading.value = false
  }
}

const closeModal = () => {
  showModal.value = false
}

const goLogin = () => {
  showModal.value = false
  router.push('/auth/login')
}

onMounted(() => {
  initAdvancedBackground()
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
/* 页面主容器 */
.forgot-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 25%, #2d3748 50%, #1e3a5f 75%, #0f172a 100%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

/* 高级背景动画系统 */
.background-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 液体波纹系统 */
.liquid-system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.liquid-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, rgba(59, 130, 246, 0.15) 70%);
  animation: liquidFlow 12s infinite ease-in-out;
  filter: blur(20px);
}

.blob-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
  background: radial-gradient(circle, transparent 30%, rgba(59, 130, 246, 0.2) 70%);
}

.blob-2 {
  width: 250px;
  height: 250px;
  top: 60%;
  right: 15%;
  animation-delay: -3s;
  background: radial-gradient(circle, transparent 30%, rgba(16, 185, 129, 0.15) 70%);
}

.blob-3 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: 40%;
  animation-delay: -6s;
  background: radial-gradient(circle, transparent 30%, rgba(139, 92, 246, 0.18) 70%);
}

.blob-4 {
  width: 180px;
  height: 180px;
  top: 30%;
  right: 40%;
  animation-delay: -9s;
  background: radial-gradient(circle, transparent 30%, rgba(6, 182, 212, 0.12) 70%);
}

.blob-5 {
  width: 320px;
  height: 320px;
  bottom: 10%;
  right: 10%;
  animation-delay: -12s;
  background: radial-gradient(circle, transparent 30%, rgba(34, 197, 94, 0.1) 70%);
}

@keyframes liquidFlow {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 50% 40% 60% 30%;
  }
  25% {
    transform: translate(30px, -20px) scale(1.1) rotate(90deg);
    border-radius: 40% 60% 30% 50%;
  }
  50% {
    transform: translate(-10px, 30px) scale(0.9) rotate(180deg);
    border-radius: 60% 30% 50% 40%;
  }
  75% {
    transform: translate(-30px, -10px) scale(1.05) rotate(270deg);
    border-radius: 30% 50% 40% 60%;
  }
}

/* 能量环系统 */
.energy-ring-system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.energy-ring {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: energyRotate 8s infinite linear;
}

.ring-1 {
  width: 200px;
  height: 200px;
  top: 20%;
  left: 70%;
  border-image: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6) 1;
  animation-delay: 0s;
}

.ring-2 {
  width: 150px;
  height: 150px;
  bottom: 30%;
  left: 20%;
  border-image: conic-gradient(from 120deg, #10b981, #06b6d4, #3b82f6, #10b981) 1;
  animation-delay: -2.7s;
}

.ring-3 {
  width: 250px;
  height: 250px;
  top: 50%;
  right: 25%;
  border-image: conic-gradient(from 240deg, #8b5cf6, #f59e0b, #ef4444, #8b5cf6) 1;
  animation-delay: -5.3s;
}

.ring-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ringPulse 2s infinite ease-in-out;
  box-shadow: 0 0 20px currentColor;
}

@keyframes energyRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ringPulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.5); 
  }
}

/* 数字雨效果 */
.digital-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  font-family: 'Courier New', monospace;
}

.rain-column {
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  animation: rainDrop 3s infinite linear;
  color: rgba(0, 255, 150, 0.6);
  font-size: 12px;
}

.rain-column:nth-child(1) { left: 8%; animation-delay: 0s; }
.rain-column:nth-child(2) { left: 16%; animation-delay: -0.5s; }
.rain-column:nth-child(3) { left: 24%; animation-delay: -1s; }
.rain-column:nth-child(4) { left: 32%; animation-delay: -1.5s; }
.rain-column:nth-child(5) { left: 40%; animation-delay: -2s; }
.rain-column:nth-child(6) { left: 48%; animation-delay: -2.5s; }
.rain-column:nth-child(7) { left: 56%; animation-delay: -3s; }
.rain-column:nth-child(8) { left: 64%; animation-delay: -0.3s; }
.rain-column:nth-child(9) { left: 72%; animation-delay: -0.8s; }
.rain-column:nth-child(10) { left: 80%; animation-delay: -1.3s; }
.rain-column:nth-child(11) { left: 88%; animation-delay: -1.8s; }
.rain-column:nth-child(12) { left: 96%; animation-delay: -2.3s; }

.rain-column::before {
  content: '01001110001101001010';
  position: absolute;
  top: -100%;
  animation: inherit;
}

@keyframes rainDrop {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* 光束扫描 */
.laser-scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.scan-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
  opacity: 0.4;
}

.scan-horizontal {
  width: 100%;
  height: 2px;
  top: 30%;
  animation: scanHorizontal 6s infinite ease-in-out;
}

.scan-vertical {
  width: 2px;
  height: 100%;
  left: 20%;
  background: linear-gradient(0deg, transparent, rgba(16, 185, 129, 0.5), transparent);
  animation: scanVertical 8s infinite ease-in-out;
}

.scan-diagonal {
  width: 150%;
  height: 2px;
  top: 70%;
  left: -25%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
  transform: rotate(45deg);
  animation: scanDiagonal 10s infinite ease-in-out;
}

@keyframes scanHorizontal {
  0%, 100% { top: 10%; opacity: 0; }
  50% { top: 90%; opacity: 0.6; }
}

@keyframes scanVertical {
  0%, 100% { left: 5%; opacity: 0; }
  50% { left: 95%; opacity: 0.6; }
}

@keyframes scanDiagonal {
  0%, 100% { 
    transform: rotate(45deg) translateX(-100%); 
    opacity: 0; 
  }
  50% { 
    transform: rotate(45deg) translateX(100%); 
    opacity: 0.5; 
  }
}

/* 电路网格 */
.circuit-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.grid-line {
  position: absolute;
  background: rgba(59, 130, 246, 0.1);
  animation: gridPulse 4s infinite ease-in-out;
}

.grid-line.horizontal {
  width: 100%;
  height: 1px;
}

.grid-line.vertical {
  width: 1px;
  height: 100%;
}

.grid-line:nth-child(1) { top: 12.5%; animation-delay: 0s; }
.grid-line:nth-child(2) { top: 25%; animation-delay: -0.5s; }
.grid-line:nth-child(3) { top: 37.5%; animation-delay: -1s; }
.grid-line:nth-child(4) { top: 50%; animation-delay: -1.5s; }
.grid-line:nth-child(5) { top: 62.5%; animation-delay: -2s; }
.grid-line:nth-child(6) { top: 75%; animation-delay: -2.5s; }
.grid-line:nth-child(7) { top: 87.5%; animation-delay: -3s; }
.grid-line:nth-child(8) { top: 100%; animation-delay: -3.5s; }

.grid-line:nth-child(9) { left: 12.5%; animation-delay: -0.25s; }
.grid-line:nth-child(10) { left: 25%; animation-delay: -0.75s; }
.grid-line:nth-child(11) { left: 37.5%; animation-delay: -1.25s; }
.grid-line:nth-child(12) { left: 50%; animation-delay: -1.75s; }
.grid-line:nth-child(13) { left: 62.5%; animation-delay: -2.25s; }
.grid-line:nth-child(14) { left: 75%; animation-delay: -2.75s; }
.grid-line:nth-child(15) { left: 87.5%; animation-delay: -3.25s; }
.grid-line:nth-child(16) { left: 100%; animation-delay: -3.75s; }

.circuit-node {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  animation: nodePulse 3s infinite ease-in-out;
  box-shadow: 0 0 10px currentColor;
}

.circuit-node:nth-child(17) { top: 25%; left: 25%; animation-delay: 0s; }
.circuit-node:nth-child(18) { top: 25%; left: 75%; animation-delay: -0.3s; }
.circuit-node:nth-child(19) { top: 50%; left: 12.5%; animation-delay: -0.6s; }
.circuit-node:nth-child(20) { top: 50%; left: 50%; animation-delay: -0.9s; }
.circuit-node:nth-child(21) { top: 50%; left: 87.5%; animation-delay: -1.2s; }
.circuit-node:nth-child(22) { top: 75%; left: 25%; animation-delay: -1.5s; }
.circuit-node:nth-child(23) { top: 75%; left: 75%; animation-delay: -1.8s; }

@keyframes gridPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.4; }
}

@keyframes nodePulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(2); 
  }
}

/* 漂浮几何体群 */
.geometric-cluster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.geo-shape {
  position: absolute;
  opacity: 0.3;
  animation: geoFloat 15s infinite ease-in-out;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #3b82f6;
}

.hexagon {
  width: 30px;
  height: 17px;
  background: #10b981;
  position: relative;
}

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.hexagon::before {
  bottom: 100%;
  border-bottom: 8.5px solid #10b981;
}

.hexagon::after {
  top: 100%;
  border-top: 8.5px solid #10b981;
}

.diamond {
  width: 20px;
  height: 20px;
  background: #8b5cf6;
  transform: rotate(45deg);
}

.circle {
  width: 25px;
  height: 25px;
  background: #f59e0b;
  border-radius: 50%;
}

.square {
  width: 20px;
  height: 20px;
  background: #ef4444;
}

.pentagon {
  position: relative;
  width: 25px;
  height: 18px;
  background: #06b6d4;
  transform: rotate(35deg);
}

.pentagon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 12.5px solid transparent;
  border-right: 12.5px solid transparent;
  border-bottom: 10px solid #06b6d4;
}

.geo-1 {
  top: 15%;
  left: 15%;
  animation-delay: 0s;
}

.geo-2 {
  top: 25%;
  right: 20%;
  animation-delay: -2.5s;
}

.geo-3 {
  bottom: 30%;
  left: 25%;
  animation-delay: -5s;
}

.geo-4 {
  top: 60%;
  right: 15%;
  animation-delay: -7.5s;
}

.geo-5 {
  bottom: 20%;
  right: 30%;
  animation-delay: -10s;
}

.geo-6 {
  top: 40%;
  left: 80%;
  animation-delay: -12.5s;
}

@keyframes geoFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(20px, -30px) rotate(90deg) scale(1.2);
  }
  50% {
    transform: translate(-15px, 20px) rotate(180deg) scale(0.8);
  }
  75% {
    transform: translate(-25px, -15px) rotate(270deg) scale(1.1);
  }
}

/* 重置密码卡片样式 */
.reset-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 10;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* 卡片头部 */
.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.reset-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: iconGlow 3s infinite ease-in-out;
}

.reset-icon svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

@keyframes iconGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8), 0 0 60px rgba(29, 78, 216, 0.4);
    transform: scale(1.05);
  }
}

.card-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin: 0;
}

/* 表单样式 */
.reset-form {
  margin-bottom: 1.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

/* 输入框包装器 */
.input-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  height: 64px;
}

.input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 输入框图标 */
.input-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 1rem;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.input-wrapper:focus-within .input-icon {
  color: rgba(59, 130, 246, 0.8);
}

/* 输入框 */
.styled-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  height: 100%;
}

.styled-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.styled-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* 输入框下划线 */
.input-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.input-wrapper:focus-within .input-underline {
  width: 100%;
}

/* 重置按钮 */
.reset-button {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  border-radius: 16px;
  padding: 1rem 2rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  height: 56px;
  position: relative;
  overflow: hidden;
}

.reset-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.reset-button:hover::before {
  left: 100%;
}

.reset-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.reset-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button-content svg {
  width: 20px;
  height: 20px;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 卡片底部 */
.card-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-link:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.back-link svg {
  width: 18px;
  height: 18px;
}

/* 成功模态框 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.modal-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successPulse 2s infinite ease-in-out;
}

.success-icon svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

@keyframes successPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
  }
}

.modal-card h3 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
}

.modal-card p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

.modal-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 2rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .forgot-page {
    padding: 1rem;
  }
  
  .reset-card {
    padding: 2rem 1.5rem;
  }
  
  .card-title {
    font-size: 1.75rem;
  }
  
  .reset-icon {
    width: 60px;
    height: 60px;
  }
  
  .reset-icon svg {
    width: 30px;
    height: 30px;
  }
  
  .input-wrapper {
    height: 56px;
  }
  
  .reset-button {
    height: 52px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .reset-card {
    padding: 1.5rem 1rem;
  }
  
  .card-title {
    font-size: 1.5rem;
  }
  
  .input-wrapper {
    height: 52px;
    padding: 0 0.75rem;
  }
  
  .input-icon {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
  }
  
  .reset-button {
    height: 48px;
  }
}
</style>
